<template>
  <!-- 视频播放页面 -->
  <view class="video_play">
    <image :src="list.img"></image>
    <view class="video_tool">
      <view class="icon_box">
        <view
          :class="['iconfont', muted ? 'iconjingyin' : 'iconshengyin']"
          @click="handleMuted"
        ></view>
      </view>
      <view class="iconfont iconzhuanfa">
        <button class="share" open-type="share"></button>
      </view>
    </view>
    <!-- 图片区 -->
    <view class="video">
      <video
        :src="list.video"
        autoplay
        object-fit="fill"
        :muted="muted"
      ></video>
    </view>
    <view class="text_box" @click="handleDownload">
      <view class="video_text">下载高清</view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      list: {},
      /* 是否静音 */
      muted: false
    };
  },
  onLoad() {
    this.list = getApp().globalData.video;
    // console.log(this.list);
  },
  methods: {
    /* 点击下载视频 */

    /* 是否静音 */
    handleMuted() {
      this.muted = !this.muted;
      console.log(this.muted);
    },
    /* 下载识视频 */
    async handleDownload() {
      /* 下载文件到本地内存 */
      await uni.showLoading({
        title: "下载中"
      });
      const { tempFilePath } = (
        await uni.downloadFile({ url: this.list.video })
      )[1];
      uni.saveVideoToPhotosAlbum({
        filePath: tempFilePath,
        success() {
          uni.showToast({
            title: "下载成功"
          });
        }
      });
      uni.hideLoading();
    }
  }
};
</script>
<style lang="less" scoped>
.video_play {
  position: relative;
  image {
    position: absolute;
    width: 100vw;
    height: 100vh;
    filter: blur(5px);
    z-index: -1;
  }
  .video_tool {
    height: 80rpx;
    display: flex;
    justify-content: flex-end;
    margin-right: 20rpx;

    .iconfont {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.2);
      font-size: 50rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
    }
    .iconzhuanfa {
      position: relative;
      button {
        position: absolute;
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        opacity: 0;
      }
    }
  }

  .video {
    display: flex;
    justify-content: center;
    align-items: center;
    video {
      width: 360rpx;
      height: 600rpx;
    }
  }
  .text_box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .video_text {
      margin: 20rpx;
      width: 50%;
      height: 80rpx;
      background-color: rgba(0, 0, 0, 0.2);
      border-radius: 30rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 40rpx;
      color: #fff;
      border: 2rpx solid #fff;
    }
  }
}
</style>
